<!-- 入库记录 -->
<template>
  <div class="storageRecord">
    <div class="storageRecord-header">
      <div class="storageRecord-header-btn">
        <el-button size="mini">导出</el-button>
      </div>
      <div class="storageRecord-header-info">
        <!-- <div class="storageRecord-header-info-item">
          <span>需求总量：</span>
          <span>90</span>
        </div> -->
        <!-- <div class="storageRecord-header-info-item">
          <span>领用总量：</span>
          <span>0</span>
        </div> -->
        <div class="storageRecord-header-info-item">
          <span>入库总量：</span>
          <span>{{data?data.quantityRecptTotal:''}}</span>
        </div>
      </div>
    </div>
    <div class="storageRecord-main">
      <el-table :data="data?data.outsourceRecptLineVOList:null" border style="width: 100%" >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="recptName" label="入库单名称" align="center"></el-table-column>
        <el-table-column prop="recptCode" label="入库单编号" align="center"></el-table-column>
        <el-table-column prop="recptDate" label="入库日期" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.recptDate, '{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="batchCode" label="批次号" align="center"></el-table-column>
        <el-table-column prop="quantityRecived" label="入库数量" align="center"></el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称" align="center"></el-table-column>
        <el-table-column prop="locationName" label="库区名称" align="center"></el-table-column>
        <el-table-column prop="areaName" label="库位名称" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="详情" :visible.sync="dialogVisible" width="70%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="产品物料编码" width="120" align="center" prop="itemCode" />
        <el-table-column label="产品物料名称" width="150" align="center" prop="itemName" />
        <el-table-column label="规格型号" align="center" prop="specification" />
        <el-table-column label="单位" align="center" prop="unitOfMeasure" />
        <el-table-column label="入库数量" align="center" prop="quantityRecived" />
        <el-table-column label="批次号" width="100" align="center" prop="batchCode" />
        <el-table-column label="仓库" width="100" align="center" prop="warehouseName" />
        <el-table-column label="库区" width="100" align="center" prop="locationName" />
        <el-table-column label="库位" align="center" prop="areaName" />
        <el-table-column label="有效期" align="center" prop="expireDate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否检验" align="center" prop="iqcCheck">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.iqcCheck"/>
          </template>
        </el-table-column>
        <el-table-column label="检验单编号" width="120" align="center" prop="iqcCode" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listOursourcerecptline } from "@/api/mes/wm/oursourcerecptline";
export default {
  name: 'storageRecord',
  dicts: ['sys_yes_no'],
  props: {
    data: undefined
  },
  data() {
    return {
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        recptId: undefined
      },
      total: 0,
      dialogVisible: false,
    }
  },
  created() {},
  methods: {
    handleClick(row) {
      this.dialogVisible = true
      this.queryParams.recptId = row.recptId
      this.getList()
      console.log(row);
    },
    getList() {
      listOursourcerecptline(this.queryParams).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.storageRecord {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    // padding: 0 20px;
    &-btn {
      display: flex;
    }
    &-info {
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>